<template>
	<view class="add_box">
		<view class="bgc">
			<image src="@/static/imgbgc1.png" mode=""></image>
		</view>
		<view class="main">
			<textarea class="textarea" v-model="sn" placeholder-class="textareaPlace" placeholder="URL-0,URL-1," cols="30"
				rows="10"></textarea>
			<view class="tip_text">
				{{$t('equipment.name60')}} <br />
				{{$t('equipment.name61')}}
			</view>
			<view class="box_f" @click="$fun.jump('/pageC/grouping?status=1')">
				<view class="l">
					{{group_name}}
				</view>
				<view class="r">
					<image src="/static/newProject/equipment/icon_r.png" mode=""></image>
				</view>
			</view>
			<view class="box_f" @click="chooseLocation">
				<view class="l">
					{{addressName}}
				</view>
				<view class="r">
					<image src="/static/newProject/equipment/icon_r.png" mode=""></image>
				</view>
			</view>
			<view class="button" @click="addBind(sn)">
				{{$t('equipment.name62')}}
			</view>
		</view>
		
	</view>
</template>

<script>
	import amapChoose from '@/components/amap-choose/amap-choose.vue'
	export default {
		components: {
			amapChoose
		},
		data() {
			return {
				sn: '',
				group_id: null,
				group_name: this.$t('group.name7'),
				addressName:this.$t('group.name8'),
				latitude: '',
				longitude: '',
			};
		},
		onReady() {
			uni.setNavigationBarTitle({
				title:this.$t('miner.name12')
			})
		},
		onLoad(options) {
			if (options.sn) {
				this.sn = options.sn
				this.addBind(options.sn)
			}
		},
		onShow() {
			let _this = this
			uni.$on('updateData', function(data) {
				_this.group_id = data.id
				_this.group_name = data.name
			})
			this.latitude = uni.getStorageSync('latitude')
			this.longitude = uni.getStorageSync('longitude')
			this.addressName = uni.getStorageSync('address')||this.$t('group.name8')
		},
		onNavigationBarButtonTap(e) {
			let _that = this
			//#ifdef H5
			this.$fun.msg(this.$t('equipment.name10'))
			//#endif
			//#ifdef APP-PLUS
			uni.scanCode({
				success: function(res) {
					_that.sn = res.result
					_that.addBind(_that.sn)
				}
			});
			//#endif

		},
		methods: {
			//选择位置
			chooseLocation() {
				// #ifdef APP-PLUS
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.addressName = res.name
					}
				});
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url:'/pageC/webmap'
				})
				// #endif
			},
			addBind(sn) {
				if(this.group_id==null){
					this.$fun.msg(this.$t('group.name7'))
					return
				}
				if(this.latitude==''||this.longitude==''){
					this.$fun.msg(this.$t('group.name8'))
					return
				}
				this.$fun.ajax.post('butt/bind', {
					sn,
					group_id:this.group_id,
					lat:this.latitude,
					lng:this.longitude
				}).then(res => {
					this.$fun.msg(res.msg)
					if (res.code == 1) {
						this.sn = ""
						this.$fun.jump('', 4, 1200)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.add_box {
		// margin: 30rpx;
		box-sizing: border-box;
		height: 100%;
		position: relative;
		.bgc {
			height: 100%;
		}

		.main {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx;
		}

		.textarea {
			width: 100%;
			height: 320rpx;
			background: rgba(236, 236, 236, 0.3);
			border-radius: 10rpx;
			padding: 20rpx 60rpx;
			box-sizing: border-box;
		}

		.textareaPlace {
			font-size: 20rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #232323;
		}

		.tip_text {
			padding: 20rpx;
			font-size: 20rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
		}

		.box_f {
			width: 100%;
			height: 90rpx;
			background: #F6F6F6;
			display: flex;
			align-items: center;

			.l {
				width: 90%;
				margin-left: 18rpx;
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}

			.r {
				image {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}

		.button {
			margin: 30rpx auto;
			// width: 200rpx;
			height: 80rpx;
			background: #1E84F1;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>